/* @media screen and (min-width:0\0) */

@charset'utf-8';
@import'theme';
@import'color';
@import'model-beta';
@import'common';
html, body {
    width: 100%;
    height: 100%;
}
* {
    margin: 0 auto;
    font-family: 'icomoon', "Segoe UI", "Lucida Grande", Helvetica, Arial, "Microsoft YaHei", FreeSans, Arimo, "Droid Sans", "wenquanyi micro hei", "Hiragino Sans GB", "Hiragino Sans GB W3", sans-serif!important;
}

._topblock {
    width: 100%;
    height: 3rem;
}
._menublock {
    position: fixed;
    width: 100%;
    height: 0;
    z-index: 998;
    top: 0;
    left: 0;
    &.focus {
        height: 100%;
    }
}
._top {
    position: fixed;
    z-index: 1000;
    top: 0;
    left: 0;
    width: 100%;
    height: 3rem;
    background-color: $themeColor;
    color: $fontColor;
    // box-shadow: 0 1px 6px 0 $black;
    line-height: 3rem;
    box-shadow: 0 0 10px 1px rgba($gray, 0.6);
    ._top_left {
        display: inline-block;
        vertical-align: top;
        width: 46%;
        padding: 0 2%;
        a {
            margin-right: 1rem;
            line-height: 3rem;
        }
    }
    ._top_right {
        display: inline-block;
        ;
        vertical-align: top;
        width: 46%;
        padding: 0 2%;
        text-align: right;
        a {
            line-height: 2rem;
            margin-left: 1rem;
        }
    }
}
._menu {
    position: fixed;
    z-index: 999;
    left: 0;
    top: -10rem;
    width: 100%;
    text-align: center;
    // box-shadow: 0 1px 6px 0 $black;
    @include comic_1(0.1, 0);
    &.focus {
        top: 3rem;
    }
    ._menu_item {
        height: 2.5rem;
        line-height: 2.5rem;
        border-top: 1px solid $white;
        background-color: $themeColor;
        a {
            color: $fontColor;
        }
    }
}
.mainbox {
    width: 96%;
    padding: 1.5rem 2%;
    @include breakLine;
    overflow: hidden;
    div.btn {
        margin: 1rem auto;
    }
    .pinfo{
        vertical-align: top;
        margin-right: 10%;
        width: 94%;
        overflow: hidden;
        border-radius: 2px;
        padding: 1rem 3%;
        display: inline-block;
        margin-left: 0;
        background-color: rgba($white,0.7);
        box-shadow: 0 0 10px 1px rgba($gray,0.5);
        @include comic_1(0.25,0);
        &.pwd{
            margin-left: -110%;
        }
        &.addr{
            margin-left: -220%;
        }
        .addritem{
            width: 95%;
            @include newLine();
            margin: 0.5rem auto;
            padding: 0.5rem 2%;
            color: $black;
            box-shadow: 0 0 10px 1px rgba($gray,0.5);
            @include comic_1(0.35,0);
            border-radius: 2px;
            overflow: hidden;
            &.focus{
                background-color: rgba($themeColor,0.5);
                color: $fontColor;
            }
            &.remove{
                background-color: rgba($btnHover,0.5) !important;
                color: $fontColor;
            }
        }
        div.btn{
            margin-right: 1rem;
        }
        .newaddr{
            width: 90%;
            padding: 0;
            height: 0;
            overflow: hidden;
            box-shadow: 0 0 0 0px rgba($gray,0);
            @include comic_1(0.25,0);
            select{
                margin-right: 0.5rem; 
                max-width: 7rem;
            }
            &.focus{
                padding: 1rem 4%;
                height: 290px;
                box-shadow: 0 0 10px 1px rgba($gray,0.7);
            }
        }
    }

    .pointitem{
        width: 98%;
        display: inline-block;
        vertical-align: top;
        margin-right: 9%;
        background-color: $white;
        box-shadow: 0 0 10px 1px rgba($gray,0.3);
        @include comic_1(0.2,0);
        margin-left: 1%;
        &.shoppinguide{
            margin-left: -107%;
        }
        p{
            padding: 0.5rem 2%;
            font-style: italic;
        }
        .item{
            width: 96%;
            padding: 0.5rem 2%;
            line-height: 1.5rem;
            .i{
                display: inline-block;
                width: 48%;
                margin-right: 2%; 
                .price{
                    color: $red;
                }
            }
            .info{
                color: $themeColor;
                font-style: italic;
                text-shadow: 0 0 3px $btnHover;
            }
        }
    }

    .sitem {
        margin-bottom: 1.5rem;
        box-shadow: 0 0 10px 1px rgba($gray, 0.5);
        border-radius: 2px;
        white-space: normal;
        width: 96%;
        padding: 0.5rem 2%;
        background-color: rgba($white, 0.6);
        .stitle {
            color: $themeColor;
            margin: 0.5rem 0;
            font-size: 16px;
        }
        .item {
            width: 100%;
            padding: 0.5rem 2%;
            line-height: 1.5rem;
            .i {
                vertical-align: top;
                display: inline-block;
                width: 48%;
                margin-right: 2%;
            }
        }
    }
    .conbox{
        display: inline-block;
        vertical-align: top;
        width: 100%;
        margin-left: 0;
        @include comic_1(0.2,0);
        &.focus{
            margin-left: -100%;
        }
    }
    .coitem{
        width: 92%;
        padding: 0.5rem 2%;
        margin: 0.7rem auto;
        background-color: $white;
        border-radius: 2px;
        box-shadow: 0 0 10px 0 rgba($gray,0.4);
        .imgbox{
            width: 60px;
            height: 60px;
            display: inline-block;
            vertical-align: top;
            margin-right: 0.5rem;
            overflow: hidden;
            .logoimg{
                width: 100%;
                height: 100%;
            }
        }
        .info{
            display: inline-block;
            vertical-align: top;
            a{
                color: $black !important;
            }
            .item{
                line-height: 30px;
                &.g{
                    line-height: 20px;
                }
                .price{
                    color: $red;
                }
                div.btn{
                    line-height: 100%;
                    margin: 0;
                    margin-right: 1.5rem;
                }
                .cobtn{
                    padding: 0 1rem;
                    height: 18px;
                    line-height: 18px;
                }
                div.cobtn{
                        padding: 0;
                    }
            }
        }
    }
}
.cotitle{
    font-size: 18px;
}
.cgoods{
    width: 96%;
    padding: 0.5rem 2%;
    background-color: $white;
    box-shadow: 0 1px 8px 0 #aaa;
    border-radius: 2px;
    margin: 1.5rem auto;
    .citem{
        display: inline-block;
        vertical-align: top;
        padding: 1%;
        @include Line(1);
        &.img{
            width: 15%;
        }
        &.info{
            width: 80%;
        }
        div{
            @include Line(1);
            line-height: 1.5rem;
            .name{
                color:$cyan;
            }
            .price{
                color: $red;
            }
        }
    }
}
.orderitem {
    width: 100%;
    box-shadow: 0 0 10px 0 rgba($gray, 0.5);
    margin: 1rem auto;
    line-height: 20px;
    border-radius: 2px;
    overflow: hidden;
    .orderinfo {
        padding: 0.5rem;
        background-color: $themeColor;
        color: $fontColor;
        .item {
            @include Line(1);
            margin: 0.5rem 0;
            .method {
                font-style: italic;
                color: $btnHover;
                font-weight: bold;
                text-shadow: 0 0 3px $gray;
            }
        }
    }
    .ordergoods {
        background-color: $white;
        color: $black;
        .item {
            margin: 0.3rem auto;
        }
        padding: 0.5rem;
        .img {
            display: inline-block;
            width: 20%;
            height: 40px;
            img {
                height: 40px;
                weight: 40px;
            }
        }
        .info {
            display: inline-block;
            width: 80%;
            div {
                @include Line(1);
            }
        }
    }
}

._comment{
    padding: 1rem 2%;
    width: 96%;
    .commentitem{
        margin: 0.7rem auto;
        width: 100%;
        overflow: hidden;
        box-shadow: 0 0 10px 0 rgba($gray,0.3);
        border-radius: 2px;
        .obj{
            width: 94%;
            padding: 0.5rem 3%;
            background-color: $themeColor;
            color: $fontColor;
            .item{
                line-height: 2rem;
                .i{
                    vertical-align: top;
                    display: inline-block;
                    width: 48%;
                    margin-right: 2%;
                    @include Line(1);
                }
            }
        }
        ._reply{
            width: 94%;
            padding: 0.5rem 3%;
            background-color: $white;
            .replyitem{
                width: 100%;
                .replychild{
                    width: 94%;
                    box-shadow: 0 0 6px 0 rgba($gray,0.3);
                    margin: 0.5rem auto;
                    padding: 0.3rem 3%;
                    @include newLine;
                    line-height: 20px;
                    .replyer{
                        line-height: 2rem;
                    }
                }
                .L-input{
                    margin-bottom: 1.5rem;
                }
            }
        }
    }
}

.bottom-nav {
    position: fixed;
    z-index: 999;
    width: 96%;
    bottom: 0;
    left: 0;
    padding: 1rem 2%;
    background-color: $white;
    box-shadow: 0 -2px 20px 0 rgba($gray, 0.2);
    .mainmenu {
        display: inline-block;
        vertical-align: top;
        width: 10%;
        height: 2rem;
        .icon-menu {
            line-height: 2rem;
            width: 2rem;
            height: 2rem;
        }
    }
    .innertitle {
        display: inline-block;
        vertical-align: top;
        width: 90%;
        line-height: 2rem;
        height: 2rem;
        text-align: center;
    }
    .navbox {
        width: 100%;
        line-height: 2rem;
        text-align: center;
        height: auto;
        overflow: hidden;
        @include comic_1(0.15, 0);
        .navitem {
            border-radius: 2px;
            overflow: hidden;
            width: 96%;
            height: 0;
            box-shadow: 0 0 0 0 rgba($gray, 0);
            margin: 0rem auto;
            color: $black;
            @include comic_1(0.15, 0);
            &.focus {
                height: 2rem;
                margin: 0.5rem auto;
                box-shadow: 0 0 7px 0 rgba($gray, 0.2);
            }
        }
        .childmenu {
            width: 95%;
            overflow: hidden;
            padding: 0rem;
            height: 0;
            @include comic_1(0.15, 0);
            text-align: center;
            .item {
                .icon-newspaper,.icon-key,.icon-location,.icon-coin,.icon-users{
                    height: 35px;
                    width: 35px;
                    &:before{
                        font-size: 35px;
                    }
                }
                display: inline-block;
                width: 55px;
                vertical-align: top;
                height: 55px;
                padding: 10px;
                margin: 0 10px;
                background-color: $themeColor;
                box-shadow: 0 1px 10px 1px rgba($gray, 0.5);
                border-radius: 2px;
                overflow: hidden;
                color: $fontColor;
            }
            &.focus {
                padding: 0.5rem;
                height: 80px;
            }
        }
    }
}
.bottomnavblock {
    height: 70px;
}
.btn {
    padding: 0.3rem 1rem;
    border: 0;
    outline: none;
    background-color: $themeColor;
    color: $fontColor;
    border-radius: 2px;
    text-align: center;
}
div.btn {
    padding: 0;
}
.L-input {
    margin-bottom: 40px;
    inputPlaceholder {
        top: -2px;
        font-size: 14px;
    }
    input:focus, input.focus {
        outline: none;
        box-shadow: none;
        + inputPlaceholder {
            color: $black;
            font-size: 16px !important;
            font-weight: 300;
            top: -22px;
            -webkit-transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
            -moz-transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
            -o-transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
            transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
        }
    }
    input:not(:focus):valid + inputPlaceholder {
        color: #808080;
        font-size: 14px !important;
        font-weight: 300;
        top: -22px;
        transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
    }
}
